<ion-content>
    <core-split-view>
        <ion-refresher slot="fixed" [disabled]="!participants.loaded || searchInProgress" (ionRefresh)="refreshParticipants($event.target)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
        </ion-refresher>

        <core-search-box [disabled]="searchInProgress" [spellcheck]="false" autocorrect="off"
            searchArea="CoreUserParticipants" (searchTextChange)="search($event)"/>

        <core-loading [hideUntil]="participants.loaded" placeholderType="listwithavatar" placeholderHeight="44px" placeholderWidth="44px">
            @if (participants.empty && !searchInProgress && !searchQuery) {
                <core-empty-box icon="far-user" [message]="'core.user.noparticipants' | translate" />
            } @else if (participants.empty && !searchInProgress && searchQuery) {
                <core-empty-box icon="fas-magnifying-glass" [message]="'core.noresults' | translate"
                    [attr.role]="searchQuery ? 'alert' : null" />
            } @else if (!participants.empty) {
                <ion-list>
                    @for (participant of participants.items; track participant.id) {
                        <ion-item class="ion-text-wrap"
                            [attr.aria-current]="participants.getItemAriaCurrent(participant)" [attr.aria-label]="participant.fullname"
                            (click)="participants.select(participant)" button [detail]="true">

                            <core-user-avatar [user]="participant" [linkProfile]="false" [checkOnline]="true" slot="start" />

                            <ion-label>
                                @if (!searchQuery) {

                                    <p class="item-heading">{{ participant.fullname }}</p>
                                    @if ('lastcourseaccess' in participant && participant.lastcourseaccess !== undefined) {
                                        <p>
                                            <strong>{{ 'core.user.lastcourseaccess' | translate }}: </strong>
                                            @if (participant.lastcourseaccess) {
                                                {{ participant.lastcourseaccess | coreTimeAgo }}

                                            }
                                            @if (!participant.lastcourseaccess) {
                                                {{ 'core.never' | translate }}
                                            }
                                        </p>
                                    } @else if (participant.lastaccess !== undefined) {
                                        <p>
                                            <strong>{{ 'core.lastaccess' | translate }}: </strong>
                                            @if (participant.lastaccess) {
                                                {{ participant.lastaccess | coreTimeAgo }}
                                            }
                                            @if (!participant.lastaccess) {
                                                {{ 'core.never' | translate }}
                                            }
                                        </p>
                                    }

                                } @else {
                                    <p class="item-heading">
                                        <core-format-text [text]="participant.fullname" [highlight]="searchQuery" [filter]="false" />
                                    </p>
                                }
                            </ion-label>

                        </ion-item>
                    }
                </ion-list>
            }
            <core-infinite-loading [enabled]="participants.loaded && !participants.completed" (action)="fetchMoreParticipants($event)"
                [error]="fetchMoreParticipantsFailed" />
        </core-loading>
    </core-split-view>
</ion-content>
